<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


    <title>Vue 演示代码</title>
    <script src="../js/jquery.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/data-set.min.js"></script>
    <script src="../js/echarts-4.1.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">


</head>
<body>
<div id="app">
    <el-container>

        <el-aside>
            <div>
                <el-tree :data="data" :props="defaultProps"
                         :default-expand-all="true"
                         highlight-current
                         @node-click="handleNodeClick"
                         @node-contextmenu="handleContextMenu"
                         @check-change="handleNodeChange"
                >
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span v-if="data.status=='Active'" class="glyphicon glyphicon-ok" style="color: green"></span>
                        <span v-if="data.status=='Deactivating'" class="glyphicon glyphicon-minus" style="color: red"></span>
                        <span v-if="data.status=='Activating'" class="glyphicon glyphicon-plus" style="color: greenyellow"></span>
                        <span>{{ node.label }}</span>
                    </span>
                </el-tree>
                <context-menu ref="contextMenu"
                              class="right-menu"
                              :target="contextMenuTarget"
                              :show="contextMenuVisible"
                              @update:show="(show) => contextMenuVisible = show">
                    <a href="javascript:;" @click="startNode">启动</a>
                    <a href="javascript:;" @click="stopNode">停止</a>
                </context-menu>
            </div>
        </el-aside>
        <el-main>
            <div>
                <!--<el-table-->
                        <!--:data="tableData"-->
                        <!--style="width: 100%">-->
                    <!--<el-table-column-->
                            <!--prop="dataKey"-->
                            <!--label="配置"-->
                            <!--width="180">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--prop="dataVal"-->
                            <!--label="值"-->
                            <!--width="180">-->
                    <!--</el-table-column>-->
                <!--</el-table>-->
                <pre>{{ JSON.stringify(tableData, null, 4)  }}</pre>
            </div>
        </el-main>

    </el-container>


</div>

</body>
<script src="../js/elementui.js"></script>
<link rel="stylesheet" href="../css/elementui.css">
<script src="../js/vue-context-menu.js"></script>
<script src="index.js"></script>
<style>
    .right-menu {
        font-size: 14px;
        position: fixed;
        background: #fff;
        border: solid 1px rgba(0, 0, 0, .2);
        border-radius: 3px;
        z-index: 999;
        display: none;
    }

    .right-menu a {
        width: 150px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        display: block;
        color: #1a1a1a;
    }

    .right-menu a:hover {
        background: #eee;
        color: #fff;
    }

    .right-menu {
        border: 1px solid #eee;
        box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, .1);
        border-radius: 1px;
    }

    a {
        text-decoration: none;
    }

    .right-menu a {
        padding: 2px;
    }

    .right-menu a:hover {
        background: #99A9BF;
    }
</style>
</html>
